/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text,
    Toolbar,
    useTheme,
    Button,
    Container,
    IconCloud,
    InputLine,
    Input,
    useToast,
    ListFlexRow,
    DdMenu,
    IconRefButton,
    IconMoreVertical,
    DdMenuItem,
    Itext,
} from "customize-easy-ui-component";
import {PreloadedQuery} from "react-relay/hooks";
import {IspGuideQuery, IspGuideQuery$data} from "./__generated__/IspGuideQuery.graphql";
// import useMutation from 'use-mutation';
// import useUser from "../data/use-user";
// import { login } from "../libs/auth";
import useSWR from "swr";
import {mutate , } from 'swr';
import {eqpTypeAllMap} from "../dict/eqpComm";


/*暂时没用到swr！
POST ?& +Form::可行吗。
swr::  若直接SWR的方法mutate: POST的，无法获取应答结果，不能直接更新状态？不像Query，没法直接获得Mutation结果。
useSWR（）有毛病：第三方接口要求登录验证的无法自动跳转登录页面的，直接失败的。
        可利用SWR的缓存特性来替代mobx、redux、context状态管理方案。
        支持结合axios这种请求库使用。
use-mutation  只能再加包 ? https://github.com/sergiodxa/use-mutation
* */
function useGetReport(no: string) {
    const orgUrl='http://27.151.117.66:9926/fjsei/CollQuery/IspQuery/req.jsp?menuid=207&t=query_btn';
    const userFetcher = (url: string) => fetch(url, {mode: 'no-cors',credentials:'include',  }).then((res) => res.json());
    //【关键】 这里不是远程的服务器后端变更操作！！，仅仅是本地终端缓冲更新的。
    const { data, mutate, error,isLoading } = useSWR(orgUrl, userFetcher);

    const loading = !data && !error;
    const loggedOut = error && error.status === 403;

    return {
        loading,
        loggedOut,
        report: data,
        mutate
    };
}


interface Props {
    isp: IspGuideQuery$data["node"];
}

/*需要查看旧平台出报告的链接地址;
第三方的服务器限制cors导致不支持。
原来抄袭来的是基于 "next"包，自带有CSS?支持的。 <style jsx global>{`    body { nav {,} }   `}</style>会报错'jsx' does not exist on
【关键】第三方的服务器限制导致不支持，不采用前端请求提取旧平台的方案，改成交给后端去做，前端间接读取，Isp.{mdtype，mduri}两个字段可能是后端服务器间接方式地提供。
* */
export default function OldReportEntrance({isp}: Props) {
    // const { report, loading, loggedOut, mutate } = useGetReport(props.no);
    const heads= React.useMemo( () => {
        let part;
        if(isp?.mduri?.endsWith("/sealReport.pdf"))
            part=isp?.mduri?.slice(0, (isp?.mduri?.length-15) );
        return part;
    }, [ isp?.mduri ]);

    //还没法自动判定恰当的链接：让用户自己挑。 #文件被【加密】若下载的需要解密，密码在线下方式解决。 :文件还有多个名称没有列在这里！
    return (
        <>
            {
                isp?.mdtype==='URI' &&
                <ListFlexRow interactive={false}
                >
                    {isp?.mduri?
                        <>
                            <Text> <a href={isp?.mduri!}>看旧平台水印报告</a> </Text>
                            <Itext> <a href={heads+ "/report.pdf"}>看报告</a> </Itext>
                            <Itext> <a href={heads+ "/testlog.pdf"}>看原始记录</a> </Itext>
                            <Itext> <a href={heads+ "/main.xls"}>看旧excel主报告</a> </Itext>
                            <Itext>  <a href={heads+ "/testlog.doc"}>看doc记录</a> </Itext>
                            <Itext>  <a href={heads+ "/report.xls"}>看excel报告</a> </Itext>
                            <Itext>  <a href={heads+ "/testlog.xls"}>看excel记录</a> </Itext>
                            <Itext>  <a href={heads+ "/压力容器年度检查.xls"}>看压力容器年度检查xls</a> </Itext>
                            <Itext>  <a href={heads+ "/压力容器定期检验.xls"}>看压力容器定期检验xls</a> </Itext>
                            <Itext>  <a href={heads+ "/工业锅炉外部检验.xls"}>看工业锅炉外部检验xls</a> </Itext>
                            <Itext>  <a href={heads+ "/工业锅炉内部检验.xls"}>看工业锅炉内部检验xls</a> </Itext>
                            <Itext>  <a href={heads+ "/工业管道全面检验.xls"}>看工业管道全面检验xls</a> </Itext>
                            <Text>  <a href={heads+ "/工业管道定期检验.xls"}>看工业管道定期检验xls</a> </Text>
                        </>
                        :
                        "旧平台也没有找到该报告号"
                    }
                </ListFlexRow>
            }
        </>
    );
}



/*上面代码其实在</nav>跟随这个样式代码还是有起作用的！
<style  >{`
        nav {
          box-sizing: border-box;
        }
        nav h1 {
          margin: 70px;
        }
      `}</style>
* */
